<template>
    <div class="home">
        <el-button @click="incrementMutations_add">默认按钮Mutations</el-button>
        <el-button @click="actions_Promise">默认按钮actions_Promise</el-button>
        <el-button @click="actions_Promise_await">默认按钮actions_Promise_await</el-button>
        <el-button @click="actions_async_await">默认按钮actions_async_await</el-button>
        <table border="1">
            <thead>
            <th>学科</th>
            <th>成绩</th>
            </thead>
            <tbody>
            <tr>
                <td>数学</td>
                <td><input type="text" v-model="a"></td>
            </tr>
            <tr>
                <td>英语</td>
                <td><input type="text" v-model="b"></td>
            </tr>
            <tr>
                <td>化学</td>
                <td><input type="text" v-model="c"></td>
            </tr>
            <tr>
                <td>总分</td>
                <td>{{sum}}</td>
            </tr>
            <tr>
                <td>平均分</td>
                <td>{{average}}</td>
            </tr>
            <tr>
                <td>平均分d1</td>
                <td>{{$store.state.vuex.d}}</td>
            </tr>
            <tr>
                <td>平均分d2</td>
                <td>{{f}}</td><!--值是不会变化-->
            </tr>
            <tr>
                <td>平均分adda1</td>
                <td>{{adda}}</td>
            </tr>
            <tr>
                <td>平均分adda2</td>
                <td>{{$store.getters['test/adda']}}</td>
            </tr>
            </tbody>
        </table>
    </div>
</template>
<script>

    import {mapGetters, mapMutations, mapActions } from 'vuex';

    export default {
        name: 'Vuex',
        data() {
            return {
                a: 1,
                b: 2,
                c: 3,
                f: this.$store.state.vuex.d
            }
        },
        computed: {
            ...mapGetters('vuex',['adda']),
            sum: function () {
                return this.a + this.b + this.c;
            },
            average: function () {
                return Math.round(this.sum / 3);
            }
        },
        methods: {
            ...mapMutations('vuex',['incrementMutations']),
            ...mapActions('vuex',['incrementActions','incrementActions1']),
            incrementMutations_add() {
                this.incrementMutations();
                console.log("incrementMutations_add");

                // 输出结果incrementMutations->incrementMutations_add
            },
            actions_Promise() {
                this.incrementActions().then(result => {
                    console.info(result);
                });
                console.log("incrementActions_add");
                // 输出结果 incrementActions->incrementActions_add->执行成功
            },
            async actions_Promise_await() {
                await this.incrementActions().then(result => {
                    console.info(result);
                });
                console.log("incrementActions_add");
                // 输出结果 incrementActions->执行成功->incrementActions_add
            },
            async actions_async_await() {
                await this.incrementActions1();
                console.log("incrementActions1_add1")
                // 输出结果incrementActions->执行成功->incrementActions1->incrementActions1_add1
            }
        }
    }
</script>
